// 创建新标签 记得写注释  写上名字
// 宽度不是百分百 就是百分之92
import styled from "styled-components";

function r(px) {
  let baseSize = 75 / 2;
  return (px / baseSize).toFixed(2) + "rem";
}

// 头部----郭立鹏
export const TopBarSd = styled.div`
  width: 100%;
  height: ${r(44)};
  border: 1px solid red;
  overflow: hidden;
  line-height: ${r(44)};
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  z-index: 10;
  .city {
    button {
      border: none;
      border-radius: ${r(15)};
      background: rgba(0, 0, 0, 0);
      width: ${r(60)};
      height: ${r(30)};
      font-size: ${r(20)};
      color: white;
      font-weight: 900;
      margin: 0 ${r(10)};
    }
  }
  .searchlist {
    input {
      border: none;
      border-radius: ${r(15)};
      background-color: rgba(0, 0, 0, 0.9);
      color: white;
      font-size: ${r(16)};
      width: ${r(213)};
      height: ${r(30)};
    }
  }
  .image {
    display: inline-block;
    width: ${r(30)};
    height: ${r(30)};
    position: absolute;
    img {
      width: 100%;
      height: 100%;
      margin: 0 ${r(20)};
      position: relative;
      top: ${r(8)};
    }
  }
`;
export const Cityone = styled.div`
  .city {
    .cityze {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      height: ${r(43)};
      background-color: white;
      span {
        height: ${r(43)};
        float: left;
        line-height: ${r(43)};
        font-size: ${r(18)};
        margin-left: ${r(100)};
      }
      a {
        width: 8%;
        height: ${r(43)};
        float: left;
        padding-left: ${r(10)};
        line-height: ${r(43)};
        font-size: ${r(18)};
        z-index: 10000;
      }
    }
    .zhan {
      height: ${r(44)};
    }
    h2 {
      width: 97%;
      height: ${r(30)};
      font-size: ${r(15)};
      line-height: ${r(30)};
      padding-left: 3%;
      color: #999;
      background-color: #f5f5f5;
      color: #999;
    }
    p {
      width: 85%;
      height: ${r(50)};
      margin-left: ${r(15)};
      line-height: ${r(50)};
      border-bottom: 1px solid #ebebeb;
      color: #232323;
      font-size: ${r(16)};
    }
    .left {
      height: ${r(580)};
      li {
        background-color: white;
      }
    }
    .right {
      position: fixed;
      right: 0;
      top: ${r(50)};
      li {
        display: block;
        width: ${r(18)};
        height: ${r(18)};
        margin-bottom: ${r(6)};
        line-height: ${r(18)};
        color: #666;
        text-align: center;
        margin-right: ${r(7)};
        border: 1px solid white;
        border-radius: ${r(16)};
      }
    }
  }
`;

//郭立鹏 轮播图
export const CarouselWrap = styled.div`
  width: 100%;
  .slider-list {
    touch-action: none;
    .slider-slide {
      img {
        height: ${r(176)};
      }
    }
  }
`;

//刘杰 Vip 1
export const TopVipSd = styled.div`
  width: 92%;
  margin: 0 auto;
  height: ${r(162)};
  margin-bottom: ${r(16)};
  background-color: rgba(255, 252, 245, 0.5);
  border: ${r(1)} solid #ff5b05;
  border-radius: ${r(4)};
  .topvip_title {
    width: 92%;
    height: ${r(40)};
    padding: 0 4%;
    line-height: ${r(40)};
    color: #6b4218;
    border-bottom: ${r(1)} dashed hsla(30, 55%, 64%, 0.3);
    span {
      font-weight: 700;
      font-size: ${r(15)};
      margin-right: ${r(6)};
    }
    i {
      font-size: ${r(12)};
    }
    b {
      float: right;
      font-size: ${r(13)};
    }
  }
  .topvip_content {
    width: 92%;
    height: ${r(94)};
    padding: ${r(15)} 4% ${r(13)};
    img {
      display: inline-block;
      width: ${r(65)};
      height: ${r(89)};
    }
    .topvip_right {
      float: right;
      width: ${r(237)};
      height: 100%;
      margin-left: ${r(15)};
      .topvip_schedular_name {
        width: 100%;
        height: ${r(38)};
        font-size: ${r(14)};
        font-weight: 600;
        line-height: ${r(16)};
        color: #232323;
      }
      .venue_name {
        width: 100%;
        height: ${r(18)};
        font-size: ${r(12)};
        line-height: ${r(18)};
        color: #666;
        margin-top: ${r(6)};
      }
      .pre_time {
        width: 100%;
        height: ${r(26)};
        .time {
          height: ${r(26)};
          float: left;
          color: #ff6743;
          margin-right: ${r(11)};
          line-height: ${r(26)};
        }
        i {
          height: ${r(26)};
          float: left;
          color: #666;
          line-height: ${r(26)};
        }
        .warn {
          float: right;
          width: ${r(76)};
          height: ${r(24)};
          border: ${r(1)} solid #ff6743;
          color: #ff6743;
          text-align: center;
          line-height: ${r(24)};
          border-radius: ${r(20)};
        }
      }
    }
  }
`;

//刘杰 Vip 2
export const BotVipSd = styled.div`
  width: 100%;
  height: ${r(275)};
  margin-bottom: ${r(20)};
  background-color: #f5f5f5;
  .botvip_title {
    width: 92%;
    height: ${r(40)};
    padding: 0 4%;
    line-height: ${r(40)};
    font-size: ${r(15)};
    color: #f0d1b0;
    font-weight: 700;
    background-image: url("https://m.juooo.com/static/img/vip_bg.cda230e.png");
  }
  .botvip_content {
    width: 92%;
    height: ${r(219)};
    padding: 0 4% ${r(15)};
    .botviplistleft {
      width: ${r(230)};
      height: ${r(218)};
      float: left;
      .botvip_count {
        width: 100%;
        height: ${r(41)};
        line-height: ${r(41)};
      }
      .botvip_list {
        float: left;
        margin-right: ${r(8)};
        width: ${r(106)};
        height: ${r(177)};
        img {
          display: inline-block;
          width: ${r(106)};
          height: ${r(146)};
        }
        p {
          width: 100%;
          height: ${r(24)};
          line-height: ${r(24)};
          text-align: center;
          font-size: ${r(18)};
          font-weight: 400;
          color: #ff6743;
          span {
            font-size: ${r(12)};
            color: #999;
            margin-left: ${r(4)};
            text-decoration: line-through;
          }
        }
      }
    }
    .botviplistright {
      float: left;
      width: ${r(115)};
      height: ${r(218)};
      .botvip_down {
        width: 100%;
        height: ${r(41)};
        line-height: ${r(41)};
      }
      .botvip_show {
        float: left;
        width: ${r(106)};
        height: ${r(177)};
        margin-left: ${r(6)};
        img {
          display: inline-block;
          width: ${r(106)};
          height: ${r(146)};
        }
        p {
          width: 100%;
          height: ${r(24)};
          line-height: ${r(24)};
          text-align: center;
          font-size: ${r(18)};
          font-weight: 400;
          color: #ff6743;
          span {
            font-size: ${r(12)};
            color: #999;
            margin-left: ${r(4)};
          }
        }
      }
    }
  }
`;
// 张晓东 热门演出
export const HostSrec = styled.div`
  width: 97%;
  height: ${r(240)};
  padding: ${r(15)} 0 ${r(32)} 3%;
  .data-v-8c510d6a {
    width: ${r(106)};
    height: ${r(210)};
    .text-double {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: ${r(32)};
      font-size: ${r(4)};
      color: #232323;
      width: 100%;
      font-weight: 900;
    }
  }
  img {
    width: 100%;
    height: 145px;
  }
  h2 {
    display: inline-block;
    width: ${r(76)};

    font-size: ${r(18)};
    margin-block-start: ${r(15)};
    margin-block-end: ${r(15)};
    font-weight: 900;
  }
  a {
    display: block;
    float: right;
    font-size: ${r(20)};
    margin-top: ${r(15)};
    font-weight: 900;
  }
`;

//张晓东  巡回演出
export const TourRec = styled.div`
  width: 97%;
  height: ${r(240)};
  padding: ${r(15)} 0 ${r(32)} 3%;
  .data-v-8c510d6a {
    width: ${r(245)};
    height: ${r(210)};
    p {
      width: ${r(240)};
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      line-height: ${r(32)};
      font-size: ${r(4)};
      color: #232323;
      width: 100%;
      font-weight: 900;
    }
  }
  img {
    width: 245px;
    height: 140px;
  }
  h2 {
    display: inline-block;
    width: ${r(76)};

    font-size: ${r(18)};
    margin-block-start: ${r(15)};
    margin-block-end: ${r(15)};
    font-weight: 900;
  }

  a {
    display: block;
    float: right;
    font-size: ${r(20)};
    margin-top: ${r(15)};
    font-weight: 900;
  }
`;

// 梁港彬  演出类型  演唱会

export const ChildPlay = styled.div`
  width: 94%;
  .performance {
    .top {
      width: 100%;
      height: ${r(50)};
      line-height: ${r(50)};
      font-size: ${r(20)};
      padding: ${r(10)};
      .right {
        position: absolute;
        right: ${r(10)};
      }
    }
    .middle {
      a {
        width: 100%;
        height: 100%;
        display: inline-block;
      }
      width: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      padding-top: ${r(10)};
      padding-right: 0px;
      padding-bottom: ${r(10)};
      padding-left: ${r(20)};
      img {
        width: ${r(100)};
        border: 1px solid white;
      }
      .data {
        display: inline-block;
        position: absolute;
        left: ${r(160)};
        margin-top: ${r(-130)};
        font-size: ${r(16)};
        color: white;
        line-height: ${r(30)};
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .local {
        position: absolute;
        left: ${r(160)};
        margin-top: ${r(120)};
        color: white;
      }
    }
    .bottom {
      padding: ${r(20)};
      width: 94%;
      height: 100%;
      .swiper-slide {
        width: 30%;
        margin-right: ${r(20)};
        img {
          width: 100%;
          height: 60%;
        }
        .schedular_name {
          margin-top: ${r(8)};
          font-size: ${r(16)};
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: ${r(20)};
          font-weight: 500;
        }
        a {
          color: black;
        }
        .low_price {
          margin-top: ${r(8)};
          font-size: ${r(16)};
          color: red;
          span {
            font-size: ${r(12)};
            color: gray;
          }
        }
      }
    }
  }
`;
// 刘杰 演出列表
export const ShowList = styled.div`
  width: 92%;
  height: ${r(148)};
  margin: 0 auto;
  margin-top: ${r(15)};
  margin-bottom: ${r(15)};
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  li {
    display: inline-block;
    width: ${r(69)};
    height: ${r(71)};
    text-align: center;
    z-index:1000;
    i {
      color: #232323;
      img {
        display: block;
        margin: 0 auto;
        width: ${r(51)};
        height: ${r(51)};
      }
      span {
        display: block;
        margin-top: ${r(5)};
      }
    }
  }
`;
// 刘杰 热门场馆
export const HotTheat = styled.div`
  width: 96%;
  height: ${r(337)};
  padding-left: 4%;
  h1 {
    width: 100%;
    height: ${r(25)};
    line-height: ${r(25)};
    font-weight: 700;
    color: #232323;
    font-size: ${r(19)};
  }
  .hotthea_list {
    display: block;
    width: ${r(230)};
    height: ${r(260)};
    padding: ${r(20)} ${r(17)};
    border: 1px solid #b3b3b3;
    /* margin-right: ${r(20)}; */
    .hotthea_list_top {
      position: relative;
      width: ${r(230)};
      height: ${r(51)};
      .hotthea_pic {
        float: left;
        img {
          display: inline-block;
          width: ${r(50)};
          height: ${r(50)};
        }
      }
      i {
        display: inline-block;
        margin-left: ${r(12)};
        width: ${r(125)};
        height: ${r(22)};
        color: #232323;
        line-height: ${r(22)};
        font-size: ${r(15)};
        font-weight: 700;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      span{
        display:block;
        position: absolute;
        top:${r(1)};
        right: ${r(2)};
        font-size: ${r(30)};
        font-weight: 900;
        color: #666;
      }
      p {
        margin-left: ${r(12)};
        display: inline-block;
        width: ${r(125)};
        height: ${r(22)};
        line-height: ${r(22)};
        color: #666;
      }
    }
    .hotthea_show {
      display: inline-block;
      width: ${r(107)};
      height: ${r(209)};
      margin-right: ${r(8)};
      .hotthea_time {
        width: 100%;
        height: ${r(34)};
        line-height: ${r(34)};
        text-align: center;
        color: #b3b3b3;
        margin: ${r(8)} 0;
        border-bottom: 1px solid #b3b3b3;
        position: relative;
        i {
          display: block;
          width: ${r(5)};
          height: ${r(5)};
          background-color: #ccc;
          border-radius: ${r(5)};
          position: absolute;
          left: 50%;
          bottom: -3px;
        }
      }
      img {
        display: inline-block;
        width: ${r(107)};
        height: ${r(146)};
      }
    }
  }
`;
// 刘杰 推荐列表
export const RecommEnd = styled.div`
  width: 92%;
  height: ${r(4444)};
  padding: 0 4%;
  margin-top: ${r(30)};
  a {
    color: #232323;
  }
  p {
    display: block;
    width: 100%;
    height: ${r(25)};
    font-weight: 700;
    color: #232323;
    font-size: ${r(19)};
    line-height: ${r(25)};
    margin: ${r(10)} 0;
  }
  .recommend_list {
    width: 100%;
    height: ${r(144)};
    margin-top: ${r(30)};
    .recommend_pic {
      display: inline-block;
      width: ${r(105)};
      height: ${r(144)};
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .recommend_content {
    float: right;
    width: ${r(225)};
    height: ${r(144)};
    margin-left: ${r(15)};
    .recommend_time {
      display: block;
      width: 100%;
      height: ${r(16)};
      margin-top: ${r(8)};
      font-weight: 700;
      font-size: ${r(16)};
      line-height: ${r(16)};
    }
    .recommend_name {
      width: 100%;
      height: ${r(46)};
      margin: ${r(12)} 0;
      font-weight: 700;
      color: #232323;
      font-size: ${r(16)};
      line-height: ${r(23)};
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .recommend_city {
      display: block;
      width: 100%;
      height: ${r(14)};
      color: #666;
      font-size: ${r(12)};
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .recommend_price {
      display: block;
      width: 100%;
      height: ${r(16)};
      color: #999;
      font-size: ${r(12)};
      margin-top: ${r(15)};
      .recommend_price_num {
        display: inline-block;
        color: #ff6743;
        font-weight: 500;
        font-size: ${r(16)};
        margin-right: ${r(7)};
      }
    }
  }
`;
// 刘杰 搜索栏
export const PresenTation = styled.div`
  width: 92%;
  height: ${r(43)};
  padding: 0 4%;
  input {
    display: inline-block;
    width: ${r(264)};
    height: ${r(30)};
    padding: 0 ${r(8)} 0 ${r(30)};
    margin-top: ${r(6)};
    border-radius: ${r(15)};
    border: none;
    outline: none;
    border: 1px solid #ebebeb;
    background-color: #f5f5f5;
  }
  a {
    display: inline-block;
    color: #666;
    margin-left: ${r(15)};
  }
`;
//郭立鹏  搜索框 热门问题
export const Problems = styled.div`
  .sou {
    font-size: ${r(16)};
    margin: ${r(16)};
  }
  .diamonds {
    display: inline-block;
    border: ${r(1)} solid #999;
    background: #eee;
    width: ${r(100)};
    text-align: center;
    height: ${r(15)};
    margin: ${r(10)};
  }
`;
